<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content search_form teacher_plan">
      <e-cellbox middle class="title-manage">
        <e-cell-item>
          <e-heading grade='1'>{{`${$route.query.classname}《${planData.length && planData[0].subjectName}》${title}`}}</e-heading>
        </e-cell-item>
        <e-cell-item class="tr small weak">
          <el-button type="text" :class="['edit_ico', {planbtn_normal: isEdit}]" icon="edit" @click="handleEdit">编辑</el-button>
        </e-cell-item>
      </e-cellbox>
      <!--教学计划展示-->
      <div class="info_content" v-if="!isEdit">
        <template v-if="teachData.analysis || teachData.target || teachData.measure">
          <el-tabs v-model="activeTab" >
            <el-tab-pane label="学情分析" name="analysis">
              <div class="info_show" v-html="teachData.analysis"></div>
            </el-tab-pane>
            <el-tab-pane label="学习目标" name="target">
              <div class="info_show" v-html="teachData.target"></div>
            </el-tab-pane>
            <el-tab-pane label="教学措施" name="measure">
              <div class="info_show" v-html="teachData.measure"></div>
            </el-tab-pane>
          </el-tabs>
        </template>
        <!--无教学计划-->
        <e-placeholder
          :src="'/static/images/training/no_plan.png'" 
          :text="'点击编辑来填写教学计划吧！'" v-else>
        </e-placeholder>
      </div>
      <!--教学计划编辑-->
      <div v-else>
        <info-edit @cancelEdit="callOffEdit" :teachData="teachData"></info-edit>
      </div>
      <h4 class="plan_title" style="margin-top:100px;">教案</h4>
      <div class="plan_list">
        <el-row v-for="(item, index) in planData" :key="index" :class="{is_editico: item.isEdited}">
          <el-col :span="18"><div :class="[{is_edit: item.isEdited}, 'link_ico']" @click="goPlanShow(item.id, item.subjectName, item.teacherId)">课时{{index + 1}}：{{item.subjectName}}</div></el-col>
          <el-col :span="6"><div class="coach">教练：{{item.teacherName}}</div></el-col>
        </el-row>
      </div>
    </div>  
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
import InfoEdit from './components/InfoEdit'
export default {
  components: {
    InfoEdit
  },
  computed: {
    ...mapGetters({
      train_teacher_info: 'train_teacher_info'
    })
  },
  mounted () {
    this.getInfolist()
    trainApi.getSchemeClasslist({classId: this.$route.query.classid}).then((res) => {
      this.planData = res.data
    })
  },
  data () {
    return {
      title: '教学计划',
      isEdit: false,
      teachData: {
        analysis: '',
        target: '',
        measure: ''
      },
      planData: [],
      activeTab: 'analysis'
    }
  },
  methods: {
    goPlanShow: function (id, subjectName, teacherId) {
      let roleType = localStorage.getItem('role_type')
      let state = '1'
      if (roleType === '99') {
        this.train_teacher_info.id === teacherId ? state = '1' : state = '2'
      }
      this.$router.push({path: '/training/class/teachingplan/plan', query: {classid: this.$route.query.classid, classname: subjectName + this.$route.query.classname, scheduleid: id, state: state}})
    },
    getInfolist: function () {
      trainApi.getScheme({classId: this.$route.query.classid}).then((res) => {
        this.teachData = res.data
      })
    },
    handleEdit: function () { // 编辑教学计划
      this.isEdit = true
    },
    callOffEdit: function () {
      this.getInfolist()
      this.isEdit = false
    }
  }
}
</script>
<style lang="scss">

.teacher_plan{
  .title-manage {
    margin-top: -25px;
  }
  .info_content{
    padding-top:20px;
  }
  .edit_ico{
    background: #fff;
    border:none;
    color:#3983e5;
  }
  .planbtn_normal{
    color:#999;
  }
  h4.plan_title{
    font-size: 16px;
    font-weight:normal;
    margin-bottom:15px;
  }
  .info_show{
    line-height:1.8;
    color:#666;
    margin-bottom: 60px;
    word-wrap:break-word;
  }
  .plan_list{
    .el-row{
      padding:20px 0;
      border-bottom:1px solid #efefef;
      position: relative;
    }
    ::before{
      position: absolute;
      top:28px;
      width:6px;
      height:6px;
      border-radius: 50%;
      background: #ccc;
    }
    .is_editico{
      &::before{
        background: #00bb90; 
      }   
    }
    .link_ico{
      text-indent: 20px;
      color:#666;
      overflow:hidden; //超出的文本隐藏 
      text-overflow:ellipsis; //溢出用省略号显示 
      white-space:nowrap; //溢出不换行
      &:hover{
        cursor:pointer;
        color: $color-link;
      }
    }
    .is_edit{
      color:#333;
    }
    .coach{
      text-align: right;
      font-size:12px;
      color:#999999;
      overflow:hidden; //超出的文本隐藏 
      text-overflow:ellipsis; //溢出用省略号显示 
      white-space:nowrap; //溢出不换行
    }
  }
}
</style>
